<template>
  <div>
    <el-popover
      v-bind="$attrs"
      popper-class="epma-auth-popover"
      v-model="isShow"
    >
      <ul class="epma-auth-popover-list">
        <li class="epma-auth-popover-item" @click="clickPopover({id: -1,name: ''})">- 空 -</li>
        <li class="epma-auth-popover-item" v-for="item in listData" @click="clickPopover(item)" :title="item.name">{{ item.name }}</li>
      </ul>
      <slot><el-link :underline="false" slot="reference" :title="title" class="epma-auth-popover-link" style="position: relative;padding-right: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ title }} <i class="el-icon-arrow-down" style="position: absolute;right: 3px;top: 11px;"></i></el-link></slot>
    </el-popover>
  </div>
  
</template>

<script>
export default {
  name: 'Popover',
  data() {
    return {
      isShow: false
    }
  },
  props: {
    title: {
      type: String,
      default: '点击触发'
    },
    listData: {
      type: Array,
      default:() => []
    }
  },
  methods: {
    closeDialog() {
      this.isShow = false;
    },
    clickPopover(id) {
      this.$emit('clickPopover',id)
      this.isShow = false
    }
  }
}
</script>

<style lang="scss">
ul,li{
  margin: 0;
  padding: 0;
  list-style: none;
}
.epma-auth-popover{
  min-width: 110px;
  width: 110px;
  padding: 0;
  .epma-auth-popover-list{
    padding: 14px 0 5px 0;
    .epma-auth-popover-item{
      width: auto;
      margin-bottom: 15px;
      padding: 0 5px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      line-height: 22px;
      text-align: center;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &:hover{
        color: #000;
      }
    }
  }
  .popper__arrow{
    display: none;
    &:after{
      display: none;
    }
  }
}

.epma-auth-popover-link{
  display: inline-block;
  width: 110px;
  height: 36px;
  padding-left: 14px;
  line-height: 36px;
  border-radius: 2px;
  box-sizing: border-box;
  .el-icon-arrow-down{
    visibility: hidden;
    color: #969DAB;
  }
  &:hover{
    color: #015DFF;
    background: rgba(1, 93, 255, 0.06);
    .el-icon-arrow-down{
      visibility: visible;
    }
  }
}
</style>
